<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="user-scalable=no">
    <title>kill virus</title>
    <meta charset="utf-8">
    <style>
       canvas{border: 3px solid red;} 
       button{
             background: #2f435e;
             color:#f2f2f2;
             padding : 10px;
             font-size : 16px;
             border-radius: 40px;
             transition:all linear 0.30s;
             width:100px;
             height: 50px;
        }
        h1 {
            font-size: 18pt;
            background: #AAAAEE;
            padding: 5px;
        }
        table tr th {
            background: #DDDDEE;
            margin: 3px;
            padding: 3px;
        }
        table tr td {
            background: #EEEEEE;
            margin: 3px;
            padding: 3px;
        }
        ul li {
            color: #333366;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="480" height="480" style="border:solid"> </canvas>
<canvas id = "information" width='300' height='480'></canvas>
<script type="text/javascript" src = "game.js"></script>
<script type="text/javascript" src = "chat.js"></script>
<script type="text/javascript" src = "socket.io.js"></script>


<div style="margin-left:100px">
    <button id = "up" onclick = "player.move('U')"  >up</button>
</div>
<div>
    <button id = "le" onclick = "player.move('L')">left</button>
    <button style="margin-left:100px" id = "ri" onclick = "player.move('R')">right</button>
    <button style="margin-left:250px;height:90px;width: 180px;" id = "fire" onclick = "bullets.push(new Bullet(image4,player.x, player.y,player));">fire</button>
</div>
<div style="margin-left:100px">
    <button id = "do" onclick = "player.move('D')">down</button>
</div>
<hr>
<h2>玩家交互聊天：</h2>
    <input id="sendTxt" type="text">
	<button id="sendBtn">发送</button>
	<script type="text/javascript">
		var socket = io("ws://cmcshenwei.cn:39003/");
		function showMessage(str, type){
			var div = document.createElement('div');
			div.innerHTML = str;
			if(type == "enter"){
				div.style.color = "blue";
			}else if(type == "leave"){
				div.style.color = "red";
			}
			document.body.appendChild(div);
		}
		
			document.getElementById("sendBtn").onclick = function(){
				var txt = document.getElementById("sendTxt").value;
				if(txt){
					socket.emit('message',txt);
				}	
			}
			
			socket.on('enter', function(data){
				showMessage(data, 'enter');
			})

			socket.on('message', function(data){
				showMessage(data, 'message');
			})

			socket.on('leave', function(data){
				showMessage(data, 'leave');
			})
		
	</script>
</article>
</body>
</html>